<template>
    <div class="BusinessView">
        <div class="LeftView">
            <div class="TreeView">
                <TreeView :data="TreeData" :selectId="ActiveTreeId" :showAll="true" ref="Tree" @change="TreeChangeEvent" @nodeClick="TreeClickEvent" />
            </div>
            <div class="ListView">
                <div class="ListItem" :class="{ active: ActiveTreeId == item.id }" v-for="(item, index) in ActiveTreeList" :key="index" @click="ShowTableData(item)">
                    {{ item.title }}
                </div>
            </div>
        </div>
        <div class="TableView" v-if="EditTreeData[ListActiveId]">
            <div class="TableTitle">{{ EditTreeData[ListActiveId].TreeData.title }}</div>
            <div class="TabelBody">
                <Table :height="650" :columns="EditTreeData[ListActiveId].cols" :data="EditTreeData[ListActiveId].data">
                    <template v-for="item in EditTreeData[ListActiveId].cols" :slot="item.type" slot-scope="{ row, index }">
                        <component
                            :key="item.key"
                            v-if="item.type != 'action'"
                            :is="'Table' + item.type"
                            :value="row[item.key]"
                            :selectList="item.dist"
                            @input="
                                (val) => {
                                    input(val, index, item)
                                }
                            "
                        ></component>
                        <Button :key="item.key" :size="'small'" v-else type="primary">操作</Button>
                    </template>
                </Table>
            </div>
        </div>
    </div>
</template>

<script>
import TreeView from '../2-Tree/treeindex.vue'
import { mapState } from 'vuex'

import TableText from './Table_Text.vue'
import TableSelect from './Table_Select.vue'
import TableSelectEdit from './Table_SelectEdit.vue'

export default {
    data() {
        return {}
    },
    components: {
        TreeView,
        TableSelectEdit,
        TableSelect,
        TableText
    },
    computed: {
        ...mapState('7-Combine', ['TreeData', 'ActiveTreeList', 'ActiveTreeId', 'ListActiveId', 'EditTreeData'])
    },
    watch: {
        ListActiveId(val) {
            this.$store.dispatch('7-Combine/GetTableData', val)
        }
    },
    mounted() {
        this.$store.dispatch('7-Combine/GetTreeData')
        this.$store.dispatch('7-Combine/getActiveData').then((res) => {
            this.$refs.Tree.setCheckValueById(res, true)
            setTimeout(() => {
                this.ShowTableData(this.ActiveTreeList[0])
            }, 20)
        })
    },
    methods: {
        input(val, index, item) {
            this.EditTreeData[this.ListActiveId].data[index][item.key] = val
        },
        TreeChangeEvent() {
            var data = this.$refs.Tree.getCheckData()
            this.$store.dispatch('7-Combine/ChangeTreeActiveData', data)
        },
        ShowTableData(item) {
            console.log(item)
            this.$store.dispatch('7-Combine/SetTreeId', item.id)
        },
        TreeClickEvent(node) {
            this.$store.dispatch('7-Combine/SetTreeId', node.item.id)
        }
    }
}
</script>
<style lang="less" scoped>
.BusinessView {
    height: 700px;
    width: 100%;
    position: relative;
}
.LeftView {
    width: 300px;
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    padding-right: 10px;
    position: relative;
}
.TreeView {
    width: 100%;
    height: 400px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 10px;
    overflow-y: auto;
}
.ListView {
    width: 100%;
    height: 280px;
    overflow-y: auto;
}
.ListItem {
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}
.ListItem:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.ListItem.active {
    background-color: rgba(12, 190, 131, 0.5);
}
.TableView {
    height: 100%;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 0;
    left: 310px;
}
.TableTitle {
    line-height: 50px;
    padding: 0 10px;
    font-size: 18px;
}
.TabelBody {
    width: 100%;
    height: 650px;
}
</style>